<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery tab切换-jq22.com</title>
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        ul, li, p {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        p {
            border: 1px solid #333;
            padding: 10px 0;
        }

        p a {
            padding: 0 10px;
            height: 30px;
            display: inline-block;
            line-height: 30px;
        }

        .centera {
            padding: 20px;
            overflow: hidden;
        }

        .hover {
            background: red;
        }

        #tablea {
            background: #eee;
        }

        .box {
            margin: 10px;
            display: none
        }
    </style>
</head>
<body>
<div class="centera">
    <p id="oranger">
        <a class="hover" href="javascript:;">内容一</a>
        <a href="javascript:;">内容二</a>
        <a href="javascript:;">内容三</a>
        <a href="javascript:;">内容四</a>
    </p>
    <div id="tablea" class="tablea">
        <div class="box">1111</div>
        <div class="box">2222</div>
        <div class="box">3333</div>
        <div class="box">4444</div>
    </div>
</div>
<script>
    $(function () {
        $(".tablea").find(".box:first").show();   //为每个BOX的第一个元素显示
        $("#oranger a").on("mouseover", function () { //给a标签添加事件
            var index = $(this).index();  //获取当前a标签的个数
            $("#tablea").find(".box").hide().eq(index).show(); //返回上一层，在下面查找css名为box隐藏，然后选中的显示
            $(this).addClass("hover").siblings().removeClass("hover"); //a标签显示，同辈元素隐藏
        })
    })
</script>
</body>
</html>